<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../../docs/src/assets/image2D.png">
    <script src="../../../build/image2D.js"></script>
    <title>image2D - 用例测试 - arc弧</title>
</head>

<body>
    <script>

        // 准备画布
        var canvas = $$('<canvas>非常抱歉，您的浏览器不支持canvas!</canvas>').attr({
            "width": 800,
            "height": 400
        }).appendTo('body');

        // 获取并配置画笔
        window.painter = canvas.painter();

        /**
          * 测试开始
          * ----------------------------
          */

        painter.fillArc(200, 200, 140, 200, 0, Math.PI);

        painter.config({
            "fillStyle": "green",
            "arc-start-cap": "round"
        }).fillArc(200, 200, 160, 180, Math.PI / 2, Math.PI);

        painter.config({
            "strokeStyle": "blue",
            "arc-end-cap": "round",
            "arc-start-cap": "butt"
        })
            .strokeArc(200, 200, 140, 160, Math.PI * 7 / 4, -Math.PI / 4);
        painter.config({
            lineWidth: 30
        }).strokeArc(600, 200, 100, 160, 0, Math.PI);

        painter.config('lineWidth', "2").fullArc(200, 200, 180, 200, 0, -Math.PI / 2);

        painter.fillArc(200, 200, 10, 30, 0, -Math.PI * 3);

        painter.config("arc-start-cap", "round").fillArc(200, 200, 50, 70, 1, -Math.PI * 2 + 1);

        // 测试虚线
        painter
            .config('lineDash', [5])
            .config('lineWidth', 10)
            .strokeArc(200, 200, 100, 130, 0, Math.PI)
            .fillArc(200, 200, 100, 130, 0, -Math.PI);

        // 测试弧度闭合问题
        painter.config({
            "strokeStyle": "pink",
            "lineDash": []
        })
            .strokeArc(300, 300, 80, 40, 0, -Math.PI);

        painter.config({
            "strokeStyle": "red",
            "lineDash": []
        })
            .strokeArc(300, 300, 80, 100, 0, -Math.PI);

    </script>
</body>

</html>
